<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="vue_det">
    <h1>site:{{site}}</h1>
    <h1>url:{{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script>
    var data = {
        site:"初学vue",
        url:"www",
        alexa:"10000"
    };
    var vm = new Vue({
        el:"#vue_det",
        data:data,
        methods:{
            details:function () {
                return this.site + ",初学示例";
            }
        }
    })

    //vue似乎是把data所有属性赋给了new Vue的对象，比如
    console.log("data.site完全等于vm.site吗?"+(data.site === vm.site));
    vm.site="测试修改";
    //修改了vm对象，原本data对象也被修改
    console.log("vm.site重新设值后data.site也改变："+data.site);
    console.log(data.site);
    console.log(vm.site);

    //$前缀的实例属性
    //vue初始化后的对象反而已经没有data属性了，而是赋给$data
    console.log("data===vm.$data" + (data === vm.$data));

    //$el属性存放HtmlElementObject
    console.log("vm.$el === document.getElementById(\"vue_det\")" + (vm.$el === document.getElementById("vue_det")));
</script>
</body>
</html>